<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>地图</title>
<!--必要样式-->
<link rel="stylesheet" type="text/css" href="../../res/css/style.css" />
<link rel="stylesheet" type="text/css" href="../../res/css/bootstrap.min.css" >
<link rel="stylesheet" type="text/css" href="../../res/css/main.css">
<script src="https://lib.baomitu.com/jquery/1.12.4/jquery.min.js"></script>
</head>
<script type="text/javascript">
	$(function(){
		$("#ditu1").hide();
		$("#ditu2").hide();
		$("#ditu3").hide();
		$("#hidesc").hide();
	})
	
	function maps(id){
		location.href="gui.html?id="+id;
	}
	
	function show(id){
		$("#hidesc").show();
		$("#ditu"+id+"").show();
	}
	
	function hides(){
		$("#ditu1").hide();
		$("#ditu2").hide();
		$("#ditu3").hide();
		$("#hidesc").hide();
	}
</script>

<style>
 	#hidesc{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0px;
		left: 0px;
		z-index: 999;
	}
	
	#ditu3{
 		width:1366px;
 		height:697px;
 		background:url(images/map/shanghai.png)no-repeat;
 		background-size:1366px 697px;
 		position: absolute;
 		top:0px;
 		left:0px;
 		z-index:999;
 	}
 	
 	#ditu1{
 		width:1366px;
 		height:697px;
 		background:url(images/map/changsha.png)no-repeat;
 		background-size:1366px 697px;
 		position: absolute;
 		top:0px;
 		left:0px;
 		z-index:999;
 	}
 	
 	#ditu2{
 		width:1366px;
 		height:697px;
 		background:url(images/map/beijing.png)no-repeat;
 		background-size:1366px 697px;
 		position: absolute;
 		top:0px;
 		left:0px;
 		z-index:999;
 	}
</style>
<body>
<div class="container">
	<div class="map">
		<img src="images/map.jpg" width="716" height="595" usemap="#Map" border="0">
		<div class="city"><div class="citybg" style="background:url(images/anhui.png) no-repeat 0 0; top:314px; left:523px; width:75px; height:90px;"></div><a style=" position:absolute; top:355px; left:545px; z-index:10;" href="#">安徽省</a></div>
		<div class="city"><div class="citybg" style="background:url(images/neimeng.png) no-repeat 0 0;  top:9px; left:296px; width:318px; height:272px;"></div><a style="position:absolute; top:211px; left:424px; z-index:10;" href="#">内蒙古自治区</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/heilongjiang.png) no-repeat 0 0; top:1px; left:550px; width:165px; height:151px;"></div><a style="position:absolute;top:81px; left:624px; z-index:10;" href="#">黑龙江省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/xinjiang.png) no-repeat 0 0; top:73px; left:0px; width:292px; height:223px;"></div><a style="position:absolute;top:211px; left:124px; z-index:10;" href="#">新疆维吾尔自治区</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/xizang.png) no-repeat 0 0; top:275px; left:31px; width:281px; height:175px;"></div><a style="position:absolute;top:361px; left:145px; z-index:10;" href="#">西藏自治区</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/qinghai.png) no-repeat 0 0; top:240px; left:182px; width:185px; height:135px;"></div><a style="position:absolute;top:300px; left:254px; z-index:10;" href="#">青海省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/gansu.png) no-repeat 0 0; top:187px; left:236px; width:207px; height:177px;"></div><a style="position:absolute;top:310px; left:364px; z-index:10;" href="#">甘肃省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/ningxia.png) no-repeat 0 0; top:245px; left:379px; width:49px; height:75px;"></div><a style="position:absolute;top:272px; left:390px; z-index:10;" href="#">宁夏回族自治区</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/shanghai.png) no-repeat 0 0; top:354px; left:610px; width:23px; height:22px;"></div><a style="position:absolute;top:352px; left:615px;; z-index:10;" href="javascript:show(3);">上海市</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/liaoning.png) no-repeat 0 0; top:161px; left:557px; width:91px; height:87px;"></div><a style="position:absolute;top:180px; left:600px; z-index:10;" href="#">辽宁省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/guangdong.png) no-repeat 0 0; top:470px; left:464px; width:111px; height:88px;"></div><a style="position:absolute;top:490px; left:500px; z-index:10;" href="#">广东省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/guangxi.png) no-repeat 0 0; top:454px; left:382px; width:118px; height:92px;"></div><a style="position:absolute;top:488px; left:432px; z-index:10;" href="#">广西壮族自治区</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/henan.png) no-repeat 0 0; top:288px; left:461px; width:118px; height:92px;"></div><a style="position:absolute;top:320px; left:490px; z-index:10;" href="#">河南省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/shanxi.png) no-repeat 0 0; top:242px; left:396px; width:79px; height:134px;"></div><a style="position:absolute;top:321px; left:430px; z-index:10;" href="#">陕西省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/shanxi2.png) no-repeat 0 0; top:219px; left:458px; width:56px; height:112px;"></div><a style="position:absolute;top:271px; left:470px; z-index:10;" href="#">山西省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/hebei.png) no-repeat 0 0; top:184px; left:497px; width:85px; height:118px;"></div><a style="position:absolute;top:247px; left:508px; z-index:10;" href="#">河北省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/jilin.png) no-repeat 0 0; top:113px; left:575px; width:125px; height:88px;"></div><a style="position:absolute;top:150px; left:642px; z-index:10;" href="#">吉林省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/beijing.png) no-repeat 0 0; top:210px; left:512px; width:50px; height:38px;"></div><a style="position:absolute;top:215px; left:515px; z-index:10;" href="javascript:show(2);">北京市</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/tianjin.png) no-repeat 0 0; top:224px; left:535px; width:26px; height:34px;"></div><a style="position:absolute;top:229px; left:535px; z-index:10;" href="#">天津市</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/shandong.png) no-repeat 0 0; top:256px; left:521px; width:103px; height:68px;"></div><a style="position:absolute;top:281px; left:540px; z-index:10;" href="#">山东省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/jiangsu.png) no-repeat 0 0; top:305px; left:539px; width:93px; height:72px;"></div><a style="position:absolute;top:321px; left:570px; z-index:10;" href="#">江苏省</a></div> 
		<div class="city"><div class="citybg" style=" background:url(images/hainan.png) no-repeat 0 0; top:556px; left:442px; width:89px; height:88px;"></div><a style="position:absolute;top:565px; left:450px; z-index:10;" href="#">海南省</a></div>  
		<div class="city"><div class="citybg" style=" background:url(images/hubei.png) no-repeat 0 0; top:345px; left:438px; width:115px; height:75px;"></div><a style="position:absolute;top:365px; left:480px; z-index:10;" href="#">湖北省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/yunnan.png) no-repeat 0 0; top:412px; left:280px; width:132px; height:138px;"></div><a style="position:absolute;top:485px; left:320px; z-index:10;" href="#">云南省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/sichuan.png) no-repeat 0 0; top:328px; left:284px; width:161px; height:143px;"></div><a style="position:absolute;top:385px; left:345px; z-index:10;" href="#">四川省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/guizhou.png) no-repeat 0 0; top:409px; left:367px; width:93px; height:81px;"></div><a style="position:absolute;top:445px; left:405px; z-index:10;" href="#">贵州省</a></div> 
		<div class="city"><div class="citybg" style=" background:url(images/taiwan.png) no-repeat 0 0; top:456px; left:613px; width:32px; height:65px;"></div><a style="position:absolute;top:475px; left:620px; z-index:10;" href="#">台湾省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/fujian.png) no-repeat 0 0; top:415px; left:548px; width:70px; height:84px;"></div><a style="position:absolute;top:445px; left:565px; z-index:10;" href="#">福建省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/hunan.png) no-repeat 0 0; top:394px; left:445px; width:83px; height:96px;"></div><a style="position:absolute;top:425px; left:475px; z-index:10;" href="javascript:show(1);">湖南省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/zhejiang.png) no-repeat 0 0; top:367px; left:574px; width:62px; height:70px;"></div><a style="position:absolute;top:395px; left:588px; z-index:10;" href="#">浙江省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/jiangxi.png) no-repeat 0 0; top:390px; left:513px; width:76px; height:98px;"></div><a style="position:absolute;top:425px; left:525px; z-index:10;" href="#">江西省</a></div>
		<div class="city"><div class="citybg" style=" background:url(images/chongqing.png) no-repeat 0 0; top:363px; left:397px; width:70px; height:80px;"></div><a style="position:absolute;top:390px; left:420px; z-index:10;" href="#">重庆市</a></div>
	</div>
	<div id="hidesc">
		<div id="ditu1">
			<div onclick="hides()"><img style="width:40px;height:40px;position: relative;left:50px;top:20px;" src="images/map/timg.jpg" /></div>
			<div style="color:#82A49F;position: relative;left:380px;top:160px;"><img onclick="maps(1)"  style="width:30px;height:30px;cursor: pointer;" src="images/map/guizi.jpg" />雨花区</div>
			<div style="color:#82A49F;position: relative;left:380px;top:400px;"><img onclick="maps(2)" style="width:30px;height:30px;cursor: pointer;" src="images/map/guizi.jpg" />芙蓉路</div>
			<div style="color:#82A49F;position: relative;left:915px;top:120px;"><img onclick="maps(3)" style="width:30px;height:30px;cursor: pointer;" src="images/map/guizi.jpg" />八一路</div>
		</div>
		<div id="ditu2">
			<div onclick="hides()"><img style="width:40px;height:40px;position: relative;left:50px;top:20px;" src="images/map/timg.jpg" /></div>
			<div style="color:#82A49F;position: relative;left:375px;top:125px;"><img onclick="maps()" class="maps" style="width:30px;height:30px;" src="images/map/guizi.jpg" />北京一储物柜</div>
			<div style="color:#82A49F;position: relative;left:925px;top:90px;"><img onclick="maps()" class="maps" style="width:30px;height:30px;" src="images/map/guizi.jpg" />北京二储物柜</div>
			<div style="color:#82A49F;position: relative;left:1000px;top:380px;"><img onclick="maps()" class="maps" style="width:30px;height:30px;" src="images/map/guizi.jpg" />北京三储物柜</div>
		</div>
		<div id="ditu3">
			<div onclick="hides()"><img style="width:40px;height:40px;position: relative;left:50px;top:20px;" src="images/map/timg.jpg" /></div>
			<div style="color:#82A49F;position: relative;left:380px;top:160px;"><img onclick="maps()" class="maps" style="width:30px;height:30px;" src="images/map/guizi.jpg" />上海一储物柜</div>
			<div style="color:#82A49F;position: relative;left:900px;top:100px;"><img onclick="maps()" class="maps" style="width:30px;height:30px;" src="images/map/guizi.jpg" />上海二储物柜</div>
			<div style="color:#82A49F;position: relative;left:1000px;top:480px;"><img onclick="maps()" class="maps" style="width:30px;height:30px;" src="images/map/guizi.jpg" />上海三储物柜</div>
		</div>
	</div> 
</div>

<script src="../../res/js/jquery-3.1.1.js"></script>
<script src="../../res/js/distpicker.data.js"></script>
<script src="../../res/js/distpicker.js"></script>
<script src="../../res/js/main.js"></script>
</body>
</html>